<template>
  <form @submit.prevent="submit">
    <input type="email" v-model="form.email" />

    <textarea v-model="form.description" />

    <select v-model="form.city">
      <option value="new-york">New York</option>
      <option value="moscow">Moscow</option>
    </select>

    <input type="checkbox" v-model="form.subscribe" />

    <input type="radio" value="weekly" v-model="form.interval" />
    <input type="radio" value="monthly" v-model="form.interval" />

    <ElInput ref="descRef" v-model="form.description"></ElInput>

    <button type="submit">Submit</button>
  </form>
</template>

<script setup lang="ts">
import { ElInput } from 'element-plus';
import { reactive } from 'vue';

const $emit = defineEmits(['submit']);

const form = reactive({
  email: '',
  description: '',
  city: '',
  subscribe: false,
  interval: '',
});

const submit = () => {
  $emit('submit', form);
};
</script>

<style scoped></style>
